<template>
	<view class="log_content">
		<view class="log_nav">
			<image @click="handeleReturn" :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 18rpx;height: 32rpx;" />
		</view>

		<view class="log_header">
			<view style="font-size: 48rpx;font-weight: bold;">
				<span>{{$t('欢迎来到')}}</span>
				<span style="margin-left: 10rpx;">GLUZ</span>
			</view>
			<view style="font-size: 30rpx;">
				<span>Регистрация в </span>
				<span style="font-weight: bold;margin-left: 10rpx;">Gluz</span>
			</view>
		</view>

		<view class="log_zh_ru">
			<view class="log_zh_ru_block">
				<view :class="index===indexID?'log_items':'log_items_active'" v-for="(item,index) in zhArr" :key="index"
					@click="handeleItems(index)">{{item.title}}</view>
			</view>
		</view>

		<!-- 表单 -->
		<view class="log_form">
			<u-form labelPosition="top" :model="model" ref="uForm">
				<u-form-item prop="mobile" :border-bottom="borderBottom">
					<view class="log_username_block">
						<view class="flex_1" @click="setCodeLogin">
							<view>{{code}}</view>
							<image :src="HTTP_IMG_UTL+'login_223@2x.png'" style="width: 20rpx;height: 12rpx;" />
						</view>
						<u-input type="number" :input-align="inputAlign" :custom-style="{color: '#808080'}"
							v-model="model.mobile" :placeholder="$t('请输入您的手机号')" clearable class="no_border" />
					</view>
				</u-form-item>

				<u-form-item prop="password" v-if="code==='+7'" key="password" :border-bottom="borderBottom">
					<view class="login_password_style">
						<u-input :custom-style="{color: '#808080'}" style="width: 100%;" v-model="model.password"
							:placeholder="$t('请输入您的密码')" clearable class="no_border" :type="type" />
					</view>
				</u-form-item>
				<!-- 当codeLongin不等于真的时候，并且是俄文的时候显示请输入密码 -->
				<u-form-item prop="password" v-if="code==='+86' && codeLongin" key="password"
					:border-bottom="borderBottom">
					<view class="login_password_style">
						<u-input :custom-style="{color: '#808080'}" style="width: 100%;" v-model="model.password"
							:placeholder="$t('请输入您的密码')" clearable class="no_border" :type="type" />
					</view>
				</u-form-item>
				<!-- 当codeLongin不等于真的时候，并且是中文的时候显示请输入验证码 -->
				<u-form-item prop="code" v-if="code==='+86' && !codeLongin" key="code" :border-bottom="borderBottom">
					<view class="Verification_Code">
						<u-input :custom-style="{color: '#808080'}" v-model="model.code" :placeholder="$t('请输入验证码')"
							class="no_border" />
						<view v-if="sendLoading" class="re_ver">
							正在发送验证码
						</view>
						<view v-else class="re_ver" @click.stop="sendVerificationCode">
							<view>{{ isCounting ? `${countdown}S` : $t('获取验证码') }}</view>
						</view>

					</view>
				</u-form-item>

			</u-form>

			<view class="Forgot_password">
				<view @click="handeleRegister">{{$t('注册账号')}}</view>
				<view @click="handeleForgotPassword">{{$t('忘记密码')}}？</view>
			</view>

			<view style="margin-top: 80rpx;">
				<u-button class="custom_style" @click="submit">{{$t('登录')}}</u-button>
			</view>

			<view v-if="code==='+86'" class="code_log" @click="handeleCodeLogin">{{codeLongin?$t('验证码登录'):$t('密码登录')}}
			</view>


			<!-- 身份弹窗 -->
			<u-picker v-model="isShow" mode="selector" :range="codeList" range-key="name" :confirm-text="$t('确定')"
				:cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[codeIndex]" />
		</view>
		<!-- 隐私政策 -->
		<view class="log_group">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="log_u-checkbox">
					<u-checkbox active-color="#10B301" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.name">
					</u-checkbox>
					<view style="font-size: 24rpx;margin-left: -20rpx;">
						<span>{{$t('我已阅读并同意GLUZ用户账号的')}}</span>
						<span style="color: #10B301;" @click.stop="handeleLink">{{$t('服务协议')}}</span>
						<span>{{$t('和')}}</span>
						<span style="color: #10B301;" @click.stop="handeleAgreement">{{$t('隐私政策')}}</span>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="backColor"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	// #ifdef APP-PLUS
	import {
		init,
		login
	} from '@/utils/im'
	// #endif
	// #ifdef WEB
	import {
		init,
		login
	} from '@/utils/im'
	// #endif
	export default {
		data() {
			return {
				HTTP_IMG_UTL,
				sendLoading: false,
				borderBottom: false,
				list: [{ //协议选择的状态
					name: '协议',
					checked: false,
					disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: null,
				inputAlign: 'right',
				isCounting: false, //短信验证码显示文字控制隐藏显示
				countdown: 60, //验证码倒计时60秒
				codeIndex: 0, //选择86与7 使用，在下拉列表里面保存选中的项目固定使用
				codeList: [ //86和7  数组
					{
						name: '+86'
					},
					{
						name: '+7'
					}
				],
				isShow: false, //控制弹窗的显示和隐藏
				code: '+86', //默认选项
				codeLongin: true, //切换登录方式状态
				type: 'password', //input配置
				zhArr: [ //切换语言数组
					{
						title: '中'
					},
					{
						title: 'RU'
					},
				],
				indexID: 0, //切换中和RU 使用的下标
				model: { //form表单
					mobile: '', //手机号
					password: '', //密码
					code: '' //验证码
				},
				agreeApp: false, //是否同意协议
				radio: false, //阅读选框
				// account: '', //账号
				// password: '',
				account: '', //账号 18646163521
				password: '', // 123456
				show: false,
				phone: '',
				isPhoneLogin: false, //是否手机号验证码登录
				mobile: '', //登录用的手机号
				// 验证码
				tips: '',
				captcha: '', //登录用的验证码
				seconds: 120,
				seekShow: false,
				zhezhao: true,
				showPopup2: false,
				xyContent2: '',
				lang: 'zh',
				nowLang: 'zh',
				lang: 'zh', //默认语言
				plat: 'mp-weixin',
				is_staffValue: ''
			}
		},
		onLoad() {

			const {
				kefutel
			} = getApp().globalData.site
			this.phone = kefutel
			this.agreeApp = getApp().globalData.agreeApp

			this.nowLang = this.$i18n.locale
			// 获取当权语言
			this.getLang()
		},
		onShow() {
			uni.getSystemInfo({
				success: res => {
					if (res.uniPlatform === 'app') {
						this.plat = 'app'
					} else if (res.uniPlatform === 'web') {
						this.plat = 'web'
					} else if (res.uniPlatform === 'mp-weixin') {
						this.plat = 'mp-weixin'
					}
					uni.setStorage({
						key: 'plat',
						data: this.plat
					})
				}
			})
		},
		methods: {
			// 登录
			submit() {
				const regex = /^[1][3-9][0-9]{9}$/;
				// 如果手机号为空
				if (this.model.mobile === '') {
					uni.showToast({
						title: this.$t('请输入手机号 '),
						icon: 'none',
						duration: 1000
					})
				} else if (this.lang === 'zh') { //如果是中国
					if (this.codeLongin) { //判断当前是不是账号登录，如果账号登录判断密码是否为空
						if (this.model.password === '') {
							uni.showToast({
								title: this.$t('请输入您的密码'),
								icon: 'none',
								duration: 1000
							})
						} else {
							// 调登录接口
							this.getChecked()
						}
					} else if (!this.codeLongin) {
						if (this.model.code === '') {
							uni.showToast({
								title: this.$t('请输入验证码'),
								icon: 'none',
								duration: 1000
							})
						} else {
							// 调登录接口
							this.getChecked()
						}
					}
				} else if (this.lang === 'ru') { //如果是中国
					console.log('俄罗斯');
					if (this.model.password === '') { //判断密码是否为空
						uni.showToast({
							title: this.$t('请输入您的密码'),
							icon: 'none',
							duration: 1000
						})
					} else {
						// 调登录接口
						this.getChecked()
					}
				}
			},
			// 判断用户是否选则协议
			getChecked() {
				// 判断用户是否选则协议
				if (!this.list[0].checked) {
					uni.showModal({
						title: this.$t('温馨提示'),
						content: this.$t('登陆前请先阅读并同意GLUZ用户账号的服务协议和隐私政策'),
						cancelText: this.$t('不同意'), // 取消按钮的文字  
						confirmText: this.$t('同意'), // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#DB9C28',
						cancelColor: '#656565',
						success: (res) => {
							if (res.confirm) {
								this.list[0].checked = true
								// 调用登录接口进行登录
								this.setLogin()
								console.log('comfirm') //点击确定之后执行的代码
							} else {
								this.list[0].checked = false
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {
					// 如果协议为真直接调接口
					this.setLogin()
				}
			},
			// 获取用户权限
			getAuser() {
				this.$u.api.user.getUserAuth().then(res => {
					uni.setStorageSync('level', res);
				})
			},

			// 登录接口
			setLogin() {
				if (this.codeLongin) {
					// 账号密码登录
					this.$u.api.user.login({
						account: this.model.mobile, //手机号
						password: this.model.password, //密码
						country: this.lang === 'ru' ? '1' : '0',
					}).then(res => {
						if (res) {

							const agreeApp = uni.getStorageSync("agreeApp")
							uni.clearStorage();
							uni.clearStorageSync();
							if (agreeApp) uni.setStorageSync("agreeApp", agreeApp)
							this.lang = 'zh'
							if (res.country === '1') { // 中国籍
								this.lang = 'ru'
							}
							uni.setStorageSync('startPage', new Date().getTime())
							this.$i18n.locale = this.lang
							getApp().globalData.lang = this.lang
							getApp().globalData.mobile = res.mobile
							uni.setStorageSync("userInfoFull", res)
							uni.setStorageSync('mobile', res.mobile);
							uni.setStorageSync('user_id', res.user_id);
							uni.setStorageSync('xzdToken', res.token);
							uni.setStorageSync('lang', this.lang);
							uni.setStorageSync('activityNum', 0);
							this.getAuser() //登录成功获取用户权限
							uni.showToast({
								title: this.$t('登录成功'),
								icon: 'none',
								duration: 1000
							})
							// TODO::记录来源页面，跳转指定页面
							setTimeout(() => {
								// #ifdef APP-PLUS
								login();
								// #endif
								// #ifdef WEB
								login();
								// #endif

								this.$u.route({
									url: '/pages/tabbar/index',
									// type: 'switchTab'
									type: 'reLaunch'
								})

								// 解决退出IM后登录 IM 不刷新问题
								location.reload();

							}, 1500)
							let userinfo = "";
							const that = this;
							const {
								deviceBrand,
								deviceModel,
								deviceId,
								osName,
								osVersion
							} = uni.getSystemInfoSync();
							userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' +
								osVersion;
							this.$u.api.user.getUserInfo({
								userinfo: userinfo
							}).then(res => {
								uni.setStorageSync('identity_type', res.identity_type);
							});

						}
					})
				} else {
					// 验证码登录
					this.$u.api.user.mobilelogin({
						mobile: this.model.mobile, //手机号
						captcha: this.model.code, //验证码
					}).then(res => {
						if (res) {
							uni.clearStorage();
							uni.clearStorageSync();
							this.lang = 'zh'
							if (res.country === '1') { // 中国籍
								this.lang = 'ru'
							}

							uni.setStorageSync('startPage', new Date().getTime())
							this.$i18n.locale = this.lang
							getApp().globalData.lang = this.lang
							getApp().globalData.mobile = res.mobile
							uni.setStorageSync('mobile', res.mobile);
							uni.setStorageSync('user_id', res.user_id);
							uni.setStorageSync('xzdToken', res.token);
							uni.setStorageSync('lang', this.lang);
							uni.showToast({
								title: this.$t('登录成功'),
								icon: 'none',
								duration: 1000
							})
							// this.$u.toast(this.$t('登录成功'))
							setTimeout(() => {
								// #ifdef APP-PLUS
								login();
								// #endif
								// #ifdef WEB
								login();
								// #endif
								this.$u.route({
									url: '/pages/tabbar/index',
									// type: 'switchTab'
									type: 'reLaunch'
								})
							}, 1500)
							// 解决退出IM后登录 IM 不刷新问题
							location.reload();

						}
					})
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 切换中与RU  切换语言
			handeleItems(index) {
				// 切换语言的时候，同时改变+86和+7
				this.codeIndex = index
				this.code = this.codeList[index].name

				this.indexID = index
				// 切换语言
				if (index === 0) {
					this.lang = 'zh'
				} else {
					this.lang = 'ru'
				}
				/** 设置语言 */
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})
				// 更新语言
				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
			},
			// 切换 86 和 7
			setCodeLogin() {
				this.isShow = !this.isShow
			},
			// 选择86 与 7 的选中项
			handelConfirm(e) {
				// 当语言选择+7的时候，隐藏验证码登录
				if (e[0] === 1) {
					this.codeLongin = true
				} else {
					this.codeLongin = false
				}
				this.codeIndex = e[0]
				this.code = this.codeList[e[0]].name
			},
			// 返回上一页
			handeleReturn() {
				uni.navigateBack()
			},
			// 切换验证码登录
			handeleCodeLogin() {
				this.codeLongin = !this.codeLongin
			},

			// 获取当前缓存语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.indexID = 0
							this.countryID = 0
							this.lang = 'zh'
							this.code = '+86'
							this.codeIndex = 0
						} else { //其他为俄罗斯，赋值1
							this.indexID = 1
							this.countryID = 1
							this.lang = 'ru'
							this.code = '+7'
							this.codeIndex = 1
						}
					}
				});
			},
			// 点击获取短信验证码文字
			sendVerificationCode() {
				// 判断手机号是否为空
				if (this.model.mobile === '') {
					this.$u.toast(this.$t('请输入手机号'));
					return
				}
				if (this.isCounting) return;
				this.getPhoneNumberCode() //调接口发送短信

			},
			// 验证码倒计时逻辑
			startCountdown() {
				this.isCounting = true;
				const timerFn = () => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.isCounting = false;
						this.countdown = 60;
					}
				}
				timerFn()
				this.timer = setInterval(timerFn, 1000);
			},
			// 调接口发送短信验证码
			getPhoneNumberCode() {

				let params = {
					mobile: this.model.mobile, //手机号码
					event: 'mobilelogin',
				}
				// 调用发送验证码接口 'sendCaptcha'
				this.sendLoading = true
				this.$u.api.user.sendCaptcha(params).then(res => {
					// 验证码倒计时逻辑
					this.sendLoading = false;
					this.startCountdown();
				}).catch(() => {
					this.sendLoading = false;
				})
			},
			// 注册账号
			handeleRegister() {
				uni.navigateTo({
					url: '/pages/user/register/register'
				})
			},
			// 忘记密码
			handeleForgotPassword() {
				uni.navigateTo({
					url: '/pages/user/forget/forget'
				})
			},
			// 服务政策
			handeleLink() {
				this.$u.route({
					url: '/pages/user/privacy/privacy',
					params: {
						type: 'GLUZ用户账号服务协议'
					}
				})
			},
			// 隐私协议
			handeleAgreement() {
				uni.navigateTo({
					url: '/pages/user/privacy/agreement'
				})
			},
			forget() {
				this.$u.route({
					url: '/pages/user/forget/forget',
				})
			},

			showXy2() {
				this.$u.api.basic.getContentData({
					type: "隐私政策",
					nowLang: this.nowLang
				}).then(res => {
					this.xyContent2 = res
				})
				this.showPopup2 = true
			},
			seekClose(e) {
				this.seekShow = e;
			},
			guanbi() {
				this.showPopup = false
				this.showPopup2 = false
			},
			confirm1() {
				this.zhezhao = false
				getApp().globalData.agreeApp = true

			},
			noconfirm1() {
				this.zhezhao = false
				// #ifdef APP-PLUS
				plus.runtime.quit();
				return true //return true的意思是禁止返回到上一个界面
				// #endif
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// }
	}
</script>

<style lang="scss" scoped>
	.backColor {
		width: 100%;
		height: 880rpx;
		background: linear-gradient(180deg, #E0F8C5 0%, rgba(231, 251, 227, 0.16) 100%);
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.log_u-checkbox {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.no_border {
		border: none;
	}

	.log_group {
		position: absolute;
		bottom: 100rpx;
		width: calc(100% - 100rpx);
		// display: flex;
		// align-items: center;
		// justify-content: flex-start;
	}

	.Verification_Code {
		width: 100%;
		height: 104rpx;
		border-radius: 16rpx;
		padding: 30rpx 40rpx 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.re_ver {
		width: 210rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.login_password_style {
		width: 100%;
		height: 104rpx;
		border-radius: 16rpx;
		padding: 30rpx 40rpx 30rpx 40rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}

	.log_username_block {
		width: 100%;
		height: 104rpx;
		border-radius: 16rpx;
		padding: 30rpx 40rpx 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.flex_1 {
		width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #999999;
	}

	.code_log {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.custom_style {
		background-color: #000000;
		color: #ffffff;
	}

	.Forgot_password {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 40rpx;
		font-size: 24rpx;
	}

	.log_form {
		width: calc(100% - 150rpx);
	}

	.log_items_active {
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #A4A4A4;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		color: #A4A4A4;
	}

	.log_items {
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #000000;
		border-radius: 16rpx;
		background-color: #D5EF9B;
	}

	.log_zh_ru_block {
		width: 244rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.log_zh_ru {
		margin-top: 28rpx;
		height: 50rpx;
		width: calc(100% - 140rpx);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.log_header {
		width: calc(100% - 80rpx);
		height: 104rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.log_nav {
		width: calc(100% - 80rpx);
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 112rpx;
	}

	.log_content {
		width: 100%;
		// height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>